<template>
  <div class="song-comments">
    <!-- 评论输入框 -->
    <div>
      <a-list
        v-if="comments.length"
        :data-source="comments"
        :header="
          `${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`
        "
        item-layout="horizontal"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-comment
            :author="item.author"
            :avatar="item.avatar"
            :content="item.content"
            :datetime="item.datetime"
          />
        </a-list-item>
      </a-list>
      <a-comment>
        <a-avatar
          slot="avatar"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          alt="Han Solo"
        />
        <div slot="content">
          <a-form-item>
            <a-textarea :rows="3" :value="value" @change="handleChange" />
          </a-form-item>
          <a-form-item>
            <a-button
              html-type="submit"
              :loading="submitting"
              type="primary"
              @click="handleSubmit"
            >
              发布
            </a-button>
          </a-form-item>
        </div>
      </a-comment>
    </div>
    <!-- 精彩评论 -->
    <div>
      <a-list
        class="comment-list"
        :header="`精彩评论（${data.length}）`"
        item-layout="horizontal"
        :data-source="data"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <a-comment :author="item.author" :avatar="item.avatar">
            <template slot="actions">
              <span key="comment-basic-like">
                <a-tooltip title="Like">
                  <a-icon
                    type="like"
                    :theme="action === 'liked' ? 'filled' : 'outlined'"
                    @click="like"
                  />
                </a-tooltip>
                <span style="padding-left: '8px';cursor: 'auto'">
                  {{ likes }}
                </span>
              </span>
            </template>
            <template slot="actions">
              <span v-for="(ac, index) in item.actions" :key="index">{{
                ac
              }}</span>
            </template>
            <p slot="content">
              {{ item.content }}
            </p>
            <a-tooltip
              slot="datetime"
              :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')"
            >
              <span>{{ item.datetime.fromNow() }}</span>
            </a-tooltip>
          </a-comment>
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  data() {
    return {
      comments: [],
      likes: 0,
      action: null,
      submitting: false,
      value: '',
      data: [
        {
          actions: ['Reply to'],
          author: 'Han Solo',
          avatar:
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content:
            '林间听风志长啸，允诺如金润春晓。儿歌传来心欢喜，我尽你红颜痴情。爱意两情比相悦，你我谈笑与风间。',
          datetime: moment().subtract(1, 'days')
        },
        {
          actions: ['Reply to'],
          author: 'Han Solo',
          avatar:
            'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
          content: '很棒，很好听',
          datetime: moment().subtract(2, 'days')
        }
      ],
      moment
    }
  },
  methods: {
    handleSubmit() {
      if (!this.value) {
        return
      }

      this.submitting = true

      setTimeout(() => {
        this.submitting = false
        this.comments = [
          {
            author: 'Han Solo',
            avatar:
              'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
            content: this.value,
            datetime: moment().fromNow()
          },
          ...this.comments
        ]
        this.value = ''
      }, 1000)
    },
    handleChange(e) {
      this.value = e.target.value
    },
    like() {
      this.likes = 1
      this.dislikes = 0
      this.action = 'liked'
    }
  }
}
</script>
<style scoped>
.song-comments {
  margin-left: 50px;
  width: 80%;
}
</style>
